import 'package:flutter/material.dart';

import '../home/model/comic_detail_model.dart';

class ChapterListSheet extends StatelessWidget {
  final List<ComicChaptersModel> chapters;
  final int displayChapterIndex;
  final List<String> allImages;
  final Function(int) onChapterSelected;

  const ChapterListSheet({
    super.key,
    required this.chapters,
    required this.displayChapterIndex,
    required this.allImages,
    required this.onChapterSelected,
  });

  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.7,
      minChildSize: 0.3,
      maxChildSize: 0.9,
      expand: false,
      builder: (context, scrollController) {
        return Column(
          children: [
            // Top drag indicator
            Container(
              margin: const EdgeInsets.only(top: 12),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            // Title
            Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  const Text(
                    'Chapter List',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Spacer(),
                  Text(
                    '${chapters.length} chapters total',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.7),
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),

            // Chapter list
            Expanded(
              child: ListView.builder(
                controller: scrollController,
                itemCount: chapters.length,
                itemBuilder: (context, index) => _buildChapterListItem(index),
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _buildChapterListItem(int index) {
    final chapter = chapters[index];
    final isCurrentChapter = index == displayChapterIndex;
    final needsPurchase = chapter.isBuy == true; // true表示需要购买

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
      decoration: BoxDecoration(
        color: isCurrentChapter
            ? const Color(0xFF8A2BE2).withOpacity(0.2)
            : Colors.transparent,
        borderRadius: BorderRadius.circular(8),
        border: isCurrentChapter
            ? Border.all(color: const Color(0xFF8A2BE2), width: 1)
            : null,
      ),
      child: ListTile(
        leading: Container(
          width: 32,
          height: 32,
          decoration: BoxDecoration(
            color: isCurrentChapter
                ? const Color(0xFF8A2BE2)
                : needsPurchase
                    ? Colors.orange.withOpacity(0.8)
                    : Colors.white.withOpacity(0.1),
            borderRadius: BorderRadius.circular(16),
          ),
          child: Center(
            child: needsPurchase
                ? const Icon(
                    Icons.lock,
                    color: Colors.white,
                    size: 16,
                  )
                : Text(
                    '${index + 1}',
                    style: TextStyle(
                      color: isCurrentChapter
                          ? Colors.white
                          : Colors.white.withOpacity(0.7),
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
          ),
        ),
        title: Row(
          children: [
            Expanded(
              child: Text(
                chapter.chapterTitle ?? 'Chapter ${index + 1}',
                style: TextStyle(
                  color: isCurrentChapter
                      ? Colors.white
                      : needsPurchase
                          ? Colors.white.withOpacity(0.6)
                          : Colors.white.withOpacity(0.9),
                  fontSize: 16,
                  fontWeight:
                      isCurrentChapter ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
            if (needsPurchase)
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Text(
                  'PREMIUM',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
          ],
        ),
        subtitle: isCurrentChapter && allImages.isNotEmpty
            ? Text(
                '${allImages.length} images',
                style: TextStyle(
                  color: Colors.white.withOpacity(0.6),
                  fontSize: 12,
                ),
              )
            : Text(
                needsPurchase ? 'Tap to purchase' : 'Tap to load',
                style: TextStyle(
                  color: Colors.white.withOpacity(0.4),
                  fontSize: 12,
                ),
              ),
        trailing: isCurrentChapter
            ? const Icon(
                Icons.play_arrow,
                color: Color(0xFF8A2BE2),
                size: 20,
              )
            : needsPurchase
                ? const Icon(
                    Icons.shopping_cart,
                    color: Colors.orange,
                    size: 18,
                  )
                : null,
        onTap: () => onChapterSelected(index),
      ),
    );
  }
}
